<script setup lang="ts">
	import { type FormInstance, Message } from '@arco-design/web-vue';
	import { ApiNoteBookAdd } from '@/api/note/noteBook';

	const emit = defineEmits(['ok']);

	const formRef = ref<FormInstance>();

	const visible = ref(false);

	const form = ref({
		name: '', // 名称
		remark: '', // 备注
		coverUrl: `67ac60b37276642fb2956cb0.jpg`, // 封面
	});

	const loading = ref(false);

	async function handleBeforeOk(_done: (closed: boolean) => void): Promise<boolean | void> {
		if (await formRef.value?.validate()) return false;
		await noteBookAdd();
	}

	async function noteBookAdd() {
		await ApiNoteBookAdd(form.value, { loading });
		Message.success('操作成功');
		await formRef.value?.resetFields();
		handleCancel();
		emit('ok');
	}

	const handleCancel = () => {
		visible.value = false;
	};

	const rules = reactive({
		name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
	});

	async function open() {
		visible.value = true;
	}

	defineExpose({
		open,
	});
</script>

<template>
	<a-modal
		width="600px"
		v-model:visible="visible"
		title="新建笔记本"
		title-align="start"
		@cancel="handleCancel"
		:ok-loading="loading"
		:on-before-ok="handleBeforeOk"
	>
		<a-form
			ref="formRef"
			:rules="rules"
			:model="form"
			auto-label-width
		>
			<a-form-item
				field="name"
				label="名称: "
			>
				<a-input
					v-model.trim="form.name"
					placeholder="请输入名称"
					:max-length="32"
					show-word-limit
				></a-input>
			</a-form-item>
			<a-form-item
				field="remark"
				label="备注: "
			>
				<a-textarea
					v-model="form.remark"
					placeholder="请输入备注"
					:max-length="250"
					show-word-limit
					class="remark-textarea"
				></a-textarea>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<style scoped lang="scss">
	.remark-textarea {
		height: 186px;

		:deep(.arco-textarea) {
			resize: none;
		}
	}
</style>
